<template>
  <Header />
  <ZHeader />
  <div class="settlement">
    <div class="settlement-content">
      <!-- 收货地址 -->
      <div class="site">
        <p class="text">收货地址</p>
        <div class="currentShippingAddress active">
          <div class="shippingAddress-text">
            <p class="userName">张大炮</p>
            <p class="userPhone">13837505673</p>
            <p class="userCity">
              广东省&nbsp深圳市&nbsp宝安区&nbsp宝安大道东部硅谷
            </p>
          </div>
        </div>
        <div class="shippingAddress">
          <div class="shippingAddress-text">
            <p class="userName">小飞棍来诺~</p>
            <p class="userPhone">13837505673</p>
            <p class="userCity">
              广东省&nbsp深圳市&nbsp南山区&nbsp沙河街道星河街社区侨城西街1号
            </p>
          </div>
        </div>
        <div class="shippingAddress">
          <div class="addShippingAddress">
            <span>+</span>
            <p class="AddCity">添加新地址</p>
          </div>
        </div>
      </div>
      <!-- 商品及优惠券 -->
      <div class="discount">
        <h3>商品及优惠券</h3>
        <div
          class="goodsDetail"
          v-for="check in shoppingCartStore.checkArray"
          :key="check.id"
        >
          <img :src="'http://101.132.181.9:3000/' + check.productImg" alt="" />
          <span class="goodsDetail-name">{{ check.productName }}</span>
          <span class="goodsDetail-price"
            >{{ check.price }} * {{ check.num }}</span
          >
          <span class="oneTotal">{{ check.num * check.price }}元</span>
        </div>
      </div>
      <!-- 配送方式 -->
      <div class="distribution">
        <h3>配送方式</h3>
        <div>包邮</div>
      </div>
      <!-- 发票 -->
      <div class="invoice">
        <h3>发票</h3>
        <div class="invoiceContent">
          <div>电子普通发票</div>
          <div>个人</div>
          <div>商品明细</div>
          <a href="#">修改></a>
        </div>
      </div>
      <!-- 优惠力度计算 -->
      <div class="payDetails">
        <div class="payDetails-left">
          <div class="payDetailsTerrace">
            <a href="">使用优惠券</a>
            <p>无可用</p>
          </div>
          <div>使用小米礼品卡</div>
        </div>
        <div class="payDetails-right">
          <div class="payDetails-title">
            <div>商品件数：</div>
            <div>商品总价：</div>
            <div>活动优惠：</div>
            <div>优惠券抵扣：</div>
            <div>运费：</div>
            <div class="last">应付总额：</div>
          </div>
          <div class="payDetails-price">
            <p>{{ shoppingCartStore.checkArray.length }}件</p>
            <p>{{ shoppingCartStore.allMoney }}</p>
            <p>-0元</p>
            <p>-0元</p>
            <p>0元</p>
            <p class="allTotal">
              {{ shoppingCartStore.allMoney }}<span>元</span>
            </p>
          </div>
        </div>
      </div>
      <!-- 结算底部 -->
      <div class="routeBtn">
        <div class="goShopping">
          <router-link to="shopping">返回购物车</router-link>
        </div>
        <div class="goPay"><router-link to="/order">去结算</router-link></div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script lang="ts" setup>
import ZHeader from "../components/zhq/header.vue";
import Header from "../components/header.vue";
import Footer from "../components/footer.vue";
import { useShoppingCartStore } from "../store/shoppingCart";
// import { GetShoppingCartList } from "../api/shopping";
import { onMounted } from "vue";
const shoppingCartStore = useShoppingCartStore();
onMounted(() => {
  console.log(shoppingCartStore.checkArray, "计算");
});
</script>

<style scoped>
/* 结算底部 */
.routeBtn {
  height: 80px;
  display: flex;
  justify-content: space-around;
  justify-content: right;
  align-items: center;
  padding: 0 20px;
  border-top: 1px solid #e0e0e0;
}
.routeBtn div {
  width: 160px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.goShopping {
  border: 1px solid #b0b0b0;
  color: #b0b0b0;
}
.goPay {
  background-color: #ff6700;
  color: white;
  margin-left: 30px;
}
/* 优惠力度计算（右） */
.payDetails-right {
  display: flex;
}
.payDetails-title {
  margin-bottom: 10px;
  width: 100px;
  text-align: right;
  color: #757575;
}
.payDetails-title div {
  margin-bottom: 10px;
  font-size: 14px;
}
.payDetails-price p {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ff6700;
  text-align: right;
}
.last {
  margin-top: 44px;
}
.payDetails-price .allTotal {
  margin-top: 30px;

  font-size: 30px;
}
/* 优惠力度计算（左） */
.payDetails {
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
}
.payDetails-left {
  font-size: 14px;
  color: #757575;
  height: 30px;
}
.payDetails-left div {
  margin-bottom: 30px;
}
.payDetailsTerrace {
  width: 150px;
  display: flex;
  justify-content: space-between;
}
.payDetailsTerrace p {
  color: #999;
}
/* 发票 */
.invoice {
  display: flex;
  height: 97px;
  align-items: center;
  padding: 0 20px;
}
.invoice h3 {
  font-size: 18px;
  color: #333;
  width: 150px;
}
.invoiceContent {
  display: flex;
  width: 300px;
  font-size: 14px;
  color: #ff6700;
  justify-content: space-between;
}

/* 配送方式 */
.distribution {
  display: flex;
  height: 97px;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  padding: 0 20px;
}
.distribution div {
  font-size: 14px;
  color: #ff6700;
}
.distribution h3 {
  font-size: 18px;
  color: #333;
  width: 150px;
}
/* 商品优惠券 */
.discount {
  margin: 20px;
}
.discount h3 {
  font-size: 18px;
  color: #333;
}
.goodsDetail {
  margin: 20px 0;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
}
.goodsDetail img {
  width: 30px;
  height: 30px;
}
.goodsDetail-name {
  width: 650px;
  font-size: 14px;
  text-align: left;
  color: #333;
  margin-left: 15px;
}
.goodsDetail-price {
  width: 150px;
  font-size: 14px;
  color: #333;
  text-align: center;
}

.oneTotal {
  width: 190px;

  font-size: 14px;
  color: #ff6700;
  text-align: right;
}

/* 收货地址 */
.settlement {
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  border-top: 2px solid #ff6700;
  padding: 40px 0 60px;
}
.settlement-content {
  width: 1200px;
  background-color: #fff;
}
.site {
  padding: 20px 20px 0;
}
.currentShippingAddress {
  width: 270px;
  height: 180px;
  border: 1px solid #e0e0e0;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.active {
  border-color: #ff6700;
}
.shippingAddress {
  width: 270px;
  height: 180px;
  border: 1px solid #e0e0e0;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.shippingAddress-text {
  padding: 20px 20px 0;
}
.addShippingAddress span {
  font-size: 92px;
  font-weight: 100;
}
.AddCity {
  font-size: 14px;
  color: #757575;
}
.addShippingAddress {
  text-align: center;
}
.userName {
  font-size: 18px;
}
.userPhone,
.userCity {
  font-size: 14px;
  color: #757575;
  margin-top: 10px;
}
.userCity {
  line-height: 25px;
}
.text {
  font-size: 18px;
  margin: 20px 0;
  color: #333;
}
</style>
